
<div style="POSITION: relative" id="content">
  <h3>easyUI 拖动(Drag)和放置(Drop)Tree </h3>
  <div id="article_content" class="article_content">
    <p>当使用tree插件在一个应用,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">drag(拖拽) 和 drop(放置)功能是必须允许用户改变节点位置,启用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">drag
      和 drop 操作,所有你需要做的就是为tree插件设置<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;'dnd'属性为true.</span></span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344827751_1702.png" alt=""><br>
      </span></span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 Tree</h4>
    <pre name="code" class="javascript">$('#tt').tree({  
    dnd: true,  
    url: 'tree_data.json'  
}); </pre>
    当放置成功在一个tree节点,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;'onDrop' 事件将被触发,你应该做一些或更多的操作,例如保存节点状态到远程服务器端,等等..</span>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span>
    <pre name="code" class="javascript">onDrop: function(targetNode, source, point){  
       var targetId = $(target).tree('getNode', targetNode).id;  
       $.ajax({  
           url: '...',  
           type: 'post',  
           dataType: 'json',  
           data: {  
               id: source.id,  
               targetId: targetId,  
               point: point  
           }  
       });  
   }  </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI &nbsp;示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://jquery-easyui.googlecode.com/svn/trunk/share/tutorial/tree/easyui-tree-demo5.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-tree-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>